import 'package:english_words/english_words.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// 无限加载列表
class InfiniteListWidget extends StatefulWidget {
  InfiniteListWidget({Key ?key, @required this.text}) : super(key: key);
  final String ?text;

  @override
  State<StatefulWidget> createState() {
    return _InfiniteListViewState(text??"");
  }
}

class _InfiniteListViewState extends State<InfiniteListWidget> {
  static const loadingTag = "##loading##";
  var _words = <String>[loadingTag];
  String ?title;

  _InfiniteListViewState(String text) {
    title = text;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title??""),
      ),
      body: Container(
        alignment: Alignment.center,
        child: ListView.separated(
          separatorBuilder: (BuildContext context, int index) {
            return Divider(
              color: Colors.black,
              height: 1.5,
            );
          },
          itemCount: _words.length,
          itemBuilder: (BuildContext context, int index) {
            //如果到了表尾
            if (_words[index] == loadingTag) {
              //不足100条，继续获取数据
              if (_words.length - 1 < 100) {
                //获取数据
                _retrieveData();
                //加载显示loading
                return Container(
                  //返回分割器
                  padding: const EdgeInsets.all(16.0),
                  alignment: Alignment.center,
                  child: SizedBox(
                    width: 24,
                    height: 24,
                    child: CircularProgressIndicator(strokeWidth: 2),
                  ),
                );
              } else {
                //已经加载了100条数据，不在获取数据
                return Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(16),
                  child: Text(
                    "没有更多了",
                    style: TextStyle(color: Colors.grey),
                  ),
                );
              }
            }
            return ListTile(title: Text(_words[index]));
          },
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

//插入数据
  void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      setState(() {
        //重新构建列表
        _words.insertAll(
            _words.length - 1,
            //每次生成20个单词
            generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      });
    });
  }
}

// @override
// Widget build(BuildContext context) {
//   //下划线widget预定义以供复用。
//   Widget divider1 = Divider(
//     color: Colors.blue,
//   );
//   Widget divider2 = Divider(color: Colors.green);
//   return Scaffold(
//     appBar: AppBar(
//       title: Text(text),
//     ),
//     body: Container(
//       alignment: Alignment.center,
//       child: ListView.separated(
//         itemCount: 100,
//         //列表项构造器
//         itemBuilder: (BuildContext context, int index) {
//           return ListTile(title: Text("$index"));
//         },
//         //分割器构造器
//         separatorBuilder: (BuildContext context, int index) {
//           return index % 2 == 0 ? divider1 : divider2;
//         },
//       ),
//     ),
//   );
// }
// }
